<style lang='less' scoped>
    .discount{
        position: fixed;
        top: 50%;
        left: 0;
        margin-top: -100px;
        width: 80%;
        height: 200px;
        z-index: 10;
        left: 10%;
        opacity: 0;
        background: #fff;
        transition: all 1s;
        border-radius: 3px;
        display: flex;
        padding: 20px;
        box-sizing: border-box;
        flex-direction: column;
        box-shadow:2px 2px 2px #e5e5e5,2px -2px 2px #e5e5e5,-2px 2px 2px #e5e5e5,-2px -2px 2px #e5e5e5;
        &.opacity{
             opacity: 1;
              
        }
        .discount-tit{
           width: 100%;
           height: 30px;
           line-height: 30px;
           color: #940202;
           text-align: center;
           margin-bottom: 15px;
        }
        .discount-info{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            border-left: 1px solid #940202;
            border-top: 1PX solid #940202;
            >li{
                width: 100%;
                height: 40px;
                display: flex;
                >span{
                    display: inline-block;
                    flex: 1;    
                    text-align: center;
                    line-height: 40px;
                    border-right: 1px solid #940202;
                    border-bottom: 1px solid #940202;
                }
                
            }
            >li:first-child>span{
                background: #f0f0f0;
            }
        }
    }
</style>
<template>
    <div class="discount" :class="{'opacity': opacity}">
        <div class="discount-tit">折扣详情</div>
        <ul class="discount-info" v-if="mockList && mockList.length>0">
            <li v-for="(item, index) in mockList" :key="index">
                <span>{{item.num}}</span>    
                <span>{{item.count}}</span>    
            </li>   
              
        </ul>
    </div>
</template>

<script>
let timer = null
export default {
    props:{
        // 外包list 
        list:{
            default: [],
            required:true,
            type:Array
        }
    },
    data(){
        return {
            opacity: false,
            mockList:[
                {
                    num:'件数',
                    count:'折扣'
                }
            ]
        }
    },
     mounted() {
        timer = setTimeout(() => {
            this.opacity = true
            this.mockList = [...this.mockList,...this.list]
        }, 100)
    },
}
</script>
